.dropdown {
  position: relative;
  background-color: $white;
}

.dropdown__selected {
  @extend %ellipsis;

  position: relative;
  display: block;
  width: 100%;
  border: 1px solid $color-neutral-400;
  border-radius: 3px;
  padding: 0 32px 0 12px;
  color: $color-primary-900;

  @include fixed-height(36px, 13px);

  &:hover {
    text-decoration: none;
    border-color: $color-neutral-600;
  }

  .dropdown--error & {
    border-color: $color-error-500;
  }

  .dropdown--tiny & {
    height: 32px;
    line-height: 32px;
  }

  .dropdown--disabled & {
    background-color: $color-neutral-50;
    cursor: inherit;

    &:hover {
      border-color: $color-neutral-400;
    }
  }
}

.dropdown__selected-icon {
  margin-right: 4px;
  color: $color-neutral-600;
}

.dropdown__toggle-icon {
  @include absolute(0, 0, 0, auto);
  @include center-text(32px, 14px);
}

.dropdown__items {
  border: 1px solid $color-primary-500;
  border-radius: 3px;
  background-color: $white;
  box-shadow: 0 2px 6px 0 rgba($black, 0.16);
  z-index: 1;

  @include absolute(0, 0, auto, 0);

  .select__item:hover {
    background-color: transparent;
  }

  .select__item.hover {
    background-color: $color-neutral-100;
  }

  .select__item.active {
    background-color: $color-primary-100;
  }

  .select__item.active:hover::after {
    display: block;
  }

  .dropdown--floating & {
    right: auto;
  }
}
